<template>
    <div>
        <div class="layout-content-breadcrumb">
            <Breadcrumb>
                <Breadcrumb-item>咨询管理</Breadcrumb-item>
                <Breadcrumb-item>人工咨询</Breadcrumb-item>
            </Breadcrumb>
        </div>
        <div class="page-content">
            <div class="text-center">
                <a href="javascript:;" class="origin-a" @click="onLoadNew">您有{{msgCount}}条新消息</a>
            </div>
            <Table :columns="columns" :data="dataSource"></Table>
            <div class="table-paging">
                <Page :total="totalNumber" :current="page" :page-size="pageSize" show-total
                      @on-change="onPageChange"></Page>
            </div>
        </div>
    </div>
</template>
<style lang="less">
</style>
<script>
    import api from 'service/consult'
    export default{
        data(){
            return {
                page: 1,
                pageSize: 10,
                totalNumber: 0,
                search: {
                    complaint_target: ''
                },
                msgCount: 0,
                columns: [
                    {
                        title: '昵称',
                        key: 'nick'
                    },
                    {
                        title: '最近回复时间',
                        key: 'last_wx_msg_at'
                    },
                    {
                        title: '咨询条数',
                        key: 'zixun_count'
                    },
                    {
                        title: '回复条数',
                        key: 'reply_count'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.$router.push(`/manmade/${params.row.id}`)
                                        }
                                    }
                                }, '详情')
                            ]);
                        }
                    }
                ],
                dataSource: []
            }
        },
        mounted(){
            this.onPageChange(1)
            this.getMsgCount()
        },
        beforeDestroy(){
            clearInterval(this.clearInter)
        },
        methods: {
            onLoadNew(){
                this.msgCount = 0
                this.onPageChange(1)
            },
            onPageChange(page){
                this.page = page
                api.getInformation({
                    page: page,
                    per_page: this.pageSize,
                    has_send_msg:'1',
                    sort:'last_wx_msg_at',
                    order:'desc'
                }).then(({data}) => {
                    this.dataSource = data.list || [];
                    this.totalNumber = Number(data.total_count)
                })
            },
            getMsgCount(){
                let func = function (context) {
                    api.msgCount({
                        last_message_id: context.dataSource[0].msgId
                    }).then(({data}) => {
                        context.msgCount = data.count || 0
                    })
                }
                this.clearInter = setInterval(() => {
                    func(this)
                }, 5000)
            }
        }
    }
</script>